<template>
	<PullRefresh ref="pullRefresh" :http-option="httpOption()">
		<Cell :ratio="0.2933">
			<swiper class="banner"
			        circular
			        :indicator-dots="true"
			        :autoplay="true"
			        :interval="4000"
			        :duration="500">
				<swiper-item v-for="(item ,index) in slide"
				             :key="index">
					<ImageView class="banner-img" :src="item.slide_pic"/>
				</swiper-item>
			</swiper>
		</Cell>
		<view class="list">
			<Cell v-for="(item,index) in list"
			      :key="index"
			      @click.native="liveItemClick(item)"
			>
				<ImageView :src="item.thumb" class="thumb"/>
				<ImageView :src="item.avatar" class="avatar"/>
				<view class="user-name">{{item.user_nicename}}</view>
			</Cell>
		</view>
	</PullRefresh>
</template>

<script>
    import PullRefresh from '/src/components/common/PullRefresh'
    import Cell from '/src/components/common/Cell'
    import ImageView from '/src/components/common/ImageView'
    import Http from "/src/utils/http";
    import RouteUtil from '/src/utils/js/route-util'

    
    export default {
        name: "Recommend",
        components: {
            PullRefresh, Cell, ImageView
        },
        data() {
            return {
                list: [],
                slide: []
            }
        },
        destroyed() {
            Http.cancel(Http.getMainHomeLive)
        },
        methods: {
            loadData() {
                this.$refs.pullRefresh.refreshData()
            },
            httpOption() {
                const self = this
                return {
                    loadData(p, callback) {
                        Http.request(Http.getMainHomeLive, {p}, callback)
                    },
                    refreshSucc(code, msg, info) {
                        self.slide = info[0].slide
                        self.list = info[0].list
                    },
                    loadMoreSucc(code, msg, info) {
                        self.list.push(...info[0].list)
                        return info[0].list.length
                    }
                }
            },
            liveItemClick(item) {
                const liveData = JSON.stringify(item)
	            console.log(liveData)
                RouteUtil.forward(RouteUtil.LIVE_ROOM, {liveData})
            }
        }
    }
</script>

<style lang="scss" scoped>
	.banner {
		height: 100%;
	}
	
	.banner-img {
		width: 100%;
		height: 100%;
	}
	
	.list {
		margin-top: 5px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 5px 5px;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.thumb {
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}
	
	.avatar {
		height: 34px;
		width: 34px;
		border-radius: 50%;
		position: absolute;
		z-index: 1;
		left: 5px;
		bottom: 5px;
		
	}
	
	.user-name {
		color: $white;
		position: absolute;
		left: 44px;
		bottom: 5px;
		font-size: 14px;
		height: 34px;
		line-height: 34px;
	}
</style>
